<template>
  <RouterLink class="city-name" to="/city">
    {{ city.selectedCity.name }}
  </RouterLink>
</template>

<script lang="ts" setup>
import useStore from "@/hooks/useStore";

const { city } = useStore();
</script>

<style lang="scss" scoped>
.city-name {
  display: flex;
  align-items: center;
  color: var(--primary-color);
  &::after {
    content: "";
    margin-left: 4px;
    margin-top: -3px;
    display: inline-block;
    width: 6px;
    height: 6px;
    border: 1px solid var(--primary-color);
    border-top-color: transparent;
    border-left-color: transparent;
    transform: rotate(45deg);
  }
}
</style>
